import axios from "axios";
import React, { use, useDebugValue, useId, useState, useSyncExternalStore } from "react";
import './index.scss'

import { todosStore } from './24-store';

function App() {

    const todos = useSyncExternalStore(todosStore.subscribe, todosStore.getSnapshot);


    return <div>
        <h1>App</h1>
        <button onClick={() => todosStore.addTodo('方便面')}>Add todo</button>

        <hr />
        <ul>
            {todos.map(todo => (
                <li key={todo.id}>{todo.text}</li>
            ))}
        </ul>

    </div>
}


export default App